<template>
  <div>
    <div class="header">
      <div class="header1">
        <div class="left">
          <span class="iconfont icon-qiandao"></span>
          <p class="p1">签到</p>
          <p class="p2">连续签到瓜分10万红包</p>
          <span class="iconfont icon-hongbao"></span>
        </div>
        <div class="right">
          <span class="iconfont icon-24gl-headset"></span>
          <span class="iconfont icon-shezhi"></span>
        </div>
      </div>
      <div class="center">
        <div class="left1">
          <span class="iconfont icon-touxiang"></span>
        </div>
        <div class="zhong">
          <p class="p3">{{ text1 }}</p>
          <p class="p4">可体验更多服务 ></p>
        </div>
        <div class="right1">
          <p class="p5" @click="tomain">个人主页</p>
        </div>
      </div>
      <div class="bottom">
        <div class="left2">
          <span class="iconfont icon-liwu"></span>
          <h2>安居客会员</h2>
        </div>
        <div class="right2">
          <p id="p6">领取新手礼包 ></p>
        </div>
      </div>
    </div>
    <div class="xia">
      <div class="main">
        <ul>
          <li>
            <span class="s1"><i>16</i></span>
            <span>浏览历史</span>
          </li>
          <li>
            <span class="s1">0</span>
            <span>收藏关注</span>
          </li>
          <li>
            <span class="s1">0</span>
            <span>联系人</span>
          </li>
          <li>
            <span class="s1">0</span>
            <span>钱包优惠</span>
          </li>
          <li>
            <span class="iconfont icon-baozhang"></span>
            <span>保障</span>
          </li>
          <li>
            <span class="iconfont icon-falv"></span>
            <span>法律咨询</span>
          </li>
          <li>
            <span class="iconfont icon-zhuanjiafuwu"></span>
            <span>专家问答</span>
            <p class="m1">热门</p>
          </li>
          <li>
            <span class="iconfont icon-qiandao"></span>
            <span>签到</span>
          </li>
        </ul>
      </div>
      <div class="tools">
        <h3>房产工具</h3>
        <div class="bottom1">
          <section>
            <span class="iconfont icon-watchRoom"></span>
            <span id="s1">看房管理</span>
          </section>
          <section>
            <span class="iconfont icon-jiaoyi"></span>
            <span id="s1">买卖出价</span>
          </section>
          <section>
            <span class="iconfont icon-watchRoom"></span>
            <span id="s1" @click="jiaoyi">交易宝</span>
          </section>
          <section>
            <span class="iconfont icon-chafangjia"></span>
            <span id="s1">查房价</span>
          </section>
          <section>
            <span class="iconfont icon-fangdaijisuan"></span>
            <span id="s1">房贷计算</span>
          </section>
          <section>
            <span class="iconfont icon-shuifeijisuan"></span>
            <span id="s1">稿费计算</span>
          </section>
          <section>
            <span class="iconfont icon-goufangruhu"></span>
            <span id="s1">购房资格</span>
          </section>
          <section>
            <span class="iconfont icon-jingyingbaodian"></span>
            <span id="s1">安居宝典</span>
          </section>
          <section>
            <span class="iconfont icon-dianping"></span>
            <span id="s1">我的点评</span>
          </section>
          <section>
            <span class="iconfont icon-watchRoom"></span>
            <span id="s1">我的问答</span>
          </section>
          <section>
            <span class="iconfont icon-wodetiezi"></span>
            <span id="s1">我的帖子</span>
          </section>
          <section>
            <span class="iconfont icon-watchRoom"></span>
            <span id="s1">我的帖子</span>
          </section>
        </div>
      </div>
      <div class="service">
        <h3>房东服务</h3>
        <div class="bottom2">
          <section>
            <span class="iconfont icon-watchRoom"></span>
            <span id="s1">看房管理</span>
          </section>
          <section>
            <span class="iconfont icon-jiaoyi"></span>
            <span id="s1">买卖出价</span>
          </section>
          <section>
            <span class="iconfont icon-watchRoom"></span>
            <span id="s1">交易宝</span>
          </section>
          <section>
            <span class="iconfont icon-chafangjia"></span>
            <span id="s1">查房价</span>
          </section>
        </div>
      </div>
    </div>
    <banner1 />
    <div class="wenjuan">
      <p>问卷调查</p>
      <span class="iconfont icon-dayu"></span>
    </div>
    <div class="wenjuan">
      <p>举报中心</p>
      <span class="iconfont icon-dayu"></span>
    </div>
    <div class="wenjuan">
      <p>在线客服</p>
      <span class="iconfont icon-dayu"></span>
    </div>
    <myfooter />
  </div>
</template>
<script>
// import myfooter from "../components/myfooter.vue";
import myfooter from "../components/footer.vue";
import banner1 from "./banner1.vue";
// import axios from "axios";
export default {
  name: "about",
  components: {
    myfooter,
    banner1,
  },
  data() {
    return {
      text1: "",
    };
  },
  methods: {
    tomain() {
      this.$router.push("/personal");
    },
    jiaoyi() {
      this.$router.push("/jiaoyibao");
    },
    loadComments() {
      // sessionStorage.setItem("text1", this.text1);
      var list = localStorage.getItem("text1");
      console.log(list);
      this.text1 = list;
      // window.reload();
    },
  },
  created() {
    this.loadComments();
    // this.$router.go(0);
    // localStorage.removeItem("text1");
  },
};
</script>
<style scoped>
@import url(../assets/font/iconfont.css);
.header {
  background-color: #21c890;
  height: 2rem;
  overflow: hidden;
  position: relative;
}
.header1 {
  display: flex;
  margin-top: 0.2rem;
  color: #fff;
  /* position: fixed; */
  /* justify-content: space-around; */
  /* margin-left:.2rem; */
}
.left {
  display: flex;

  width: 80%;
  /* justify-content:center; */
  justify-content: space-around;
  margin-left: 0.05rem;
}
.p1 {
  font-size: 0.18rem;
  margin-left: 0.01rem;
}
.p2 {
  font-size: 0.14rem;
  border: 1px solid #fff;
  border-radius: 0.1rem;
  padding: 0 0.1rem;
  /* margin-left: .1rem; */
  /* text-align: center; */
}
.right {
  display: flex;
  width: 25%;
  justify-content: space-around;
}
.icon-qiandao {
  font-size: 0.24rem;
}
.icon-hongbao {
  color: red;
  font-size: 0.24rem;
}
.icon-24gl-headset,
.icon-shezhi {
  font-size: 0.24rem;
}
.center {
  display: flex;
  margin-top: 0.3rem;
  color: #fff;

  /* justify-content: space-around; */
}
.center .left1 {
  margin-left: 0.1rem;
  /* width: 20%; */
}
.icon-touxiang {
  font-size: 0.5rem;
}
.center .zhong {
  margin-left: 0.1rem;
}
.center .zhong .p3 {
  color: #fff;
  font-weight: 700;
  font-size: 0.18rem;
  margin-bottom: 0.05rem;
}
.center .right1 {
  margin-left: 0.3rem;
}
.center .right1 .p5 {
  border: 0.01rem solid #fff;
  padding: 0.1rem;
}
.bottom {
  height: 0.6rem;
  width: 94%;
  background-color: #d0eee2;
  /* background-color: red; */
  position: absolute;
  margin-left: 0.1rem;
  z-index: 1;
  /* text-align: center */
  margin-left: 0.1rem;
  margin-top: 0.2rem;
  display: flex;
}
.bottom .left2 {
  display: flex;
  line-height: 0.6rem;
  width: 50%;
}
.icon-liwu {
  font-size: 0.28rem;
  line-height: 0.6rem;
  margin-left: 0.1rem;
  color: orange;
}
h2 {
  font-size: 0.18rem;
  margin-left: 0.1rem;
}
.bottom .right2 {
  display: flex;
  width: 48%;
  line-height: 0.6rem;
  font-size: 0.14rem;
  margin-left: 0.6rem;
}
.xia {
  display: flex;
  flex: 1;
  overflow: auto;
  flex-direction: column;
}
.main {
  width: 94%;
  margin-left: 0.1rem;

  /* height: 0.7rem; */
}
.main ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.main li {
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
  position: relative;
}

.main li .s1 {
  font-size: 0.24rem;
  font-weight: 700;
  margin-bottom: 0.08rem;
}
.main li .m1 {
  font-size: 0.14rem;
  position: absolute;
  color: #fff;
  background-color: red;
  border-radius: 0.2rem;
  right: 0.1rem;
  top: -0.05rem;
}
.icon-baozhang {
  color: #6a9fff;
  font-size: 0.28rem;
}
.icon-falv {
  color: aqua;
  font-size: 0.28rem;
}
.icon-zhuanjiafuwu {
  color: #f8ad52;
  font-size: 0.28rem;
}
.icon-qiandao {
  color: #f68367;
  font-size: 0.28rem;
  margin-top: -0.04rem;
}
.tools {
  margin-top: 0.1rem;
  height: 1.2rem;
}
.tools h3 {
  font-size: 0.2rem;
  margin-left: -2.18rem;
  margin-top: 0.05rem;
}
.tools .bottom1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 0.7rem;
  flex-wrap: wrap;
  /* margin-top: 0.2rem; */
}

.tools .bottom1 section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /* position: relative; */
  width: 25%;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.tools #s1 {
  font-size: 0.14rem;
}
.tools .bottom1 section .iconfont {
  /* color: #fff; */
  font-size: 0.28rem;
}
.service {
  margin-top: 1rem;
  height: 1.2rem;
}
.service h3 {
  font-size: 0.2rem;
  margin-left: -2.4rem;
  margin-top: 0.05rem;
}
.service .bottom2 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 0.7rem;
  flex-wrap: wrap;
}

.service .bottom2 section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /* position: relative; */
  width: 25%;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.service .bottom2 section .iconfont {
  /* color: #fff; */
  font-size: 0.28rem;
}
.wenjuan {
  display: flex;
  width: 3.3rem;
  height: 0.4rem;
  line-height: 0.2rem;
  border-bottom: 1px solid #eeeeee;
  margin-left: 0.2rem;
}
.wenjuan p {
  font-size: 18px;
  font-weight: 700;
  color: #121212;
}
.icon-dayu {
  margin-left: 2.4rem;
  color: #b6b6b6;
}
</style>